<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 直接使用v-if -->
        <!-- <p v-if="userinfo.type=='射手'">{{userinfo.name}}</p> -->
        <!-- 多个分支 -->
        <!-- <p v-if="userinfo.age>18">成年</p>
        <p v-else-if="userinfo.age>20">青春期</p>
        <p v-else>小屁孩</p> -->


        <!-- 显示隐藏控制 -->
        <p v-if="flag">v-if</p>
        <p v-show="flag">v-show</p>
        <p>
            <button @click="flag=!flag">切换显示隐藏</button>
        </p>
    </div>
</body>

</html>
<script>
    // v-if = '条件语句'; 当条件为true, 则渲染该指令对应的标签,否则不渲染
    // 控制的是是否渲染

    // v-show = '条件语法' 当条件满足为true,则显示该标签,否则不显示, 
    // v-show 控制的是css ,已经渲染

    // 当频繁的切换显示隐藏,这时候考虑使用v-show,不用每次重新创建dom,节省浏览器性能


    const app = Vue.createApp({
        data() {
            return {
                userinfo: {
                    name: "鲁班七号",
                    type: '法师',
                    age: 21
                },
                flag: true
            }
        },
        methods: {

        }
    }).mount('#app')

</script>